
<div class="bjui-pageContent" >
    <form id="pagerForm" data-toggle="ajaxsearch" action="${request.getContextPath()}/wip/wipfollow" method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="SYS_QUERY_NAME" value="wipList" />
            <g:hiddenField name="EXPORT_CONTENT_NAME" value="Excel" />
            <label>封装形式：</label>
            %{--<input name='RESERVED1' value="${RESERVED1}" size="18"/>--}%
            <g:select id="mode" name="RESERVED1" from="${packageForm1}" data-toggle="selectpicker" data-width="150"
                      data-live-search="true" optionKey="RESERVED1" optionValue="RESERVED1" value="${RESERVED1}"
                      noSelection="['': '--ALL--']"/>
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
        </div>
    </form>

    <div class="row" data-width="1000%"  >
        <g:if test="${wipfollowlist.size > 0}">
            <table data-toggle="tablefixed" class="table table-bordered" data-width="350%" data-height="20%" data-nowrap="true">
                <thead>
                <tr style="height: 35px;">
                    <th colspan="${wipfollowlist.size*6}" align="center" >

                            <p >
                                    WIP Lot By Stage
                            </p>

                    </th>
                </tr>
                <tr  >
                    <g:each in="${wipfollowlist}" status="i" var="tableInstance">
                        <th style="height: 35px;" align="center" colspan="6" width="70"> ${tableInstance.STAGE_ID}</th>
                    </g:each>
                </tr>
                <tr  >
                    <g:each in="${wipfollowlist}" status="i" var="tableInstance">
                            <th style="height: 35px;" align="center" >RUN</th>
                        <th style="height: 35px;" align="center" >批次条数</th>
                            <th style="height: 35px;" align="center" >WAIT</th>
                        <th style="height: 35px;" align="center" >批次条数</th>
                            <th style="height: 35px;" align="center" >HOLD</th>
                        <th style="height: 35px;" align="center" >批次条数</th>
                    </g:each>
                </tr>
                </thead>
                <tbody>
                <tr align="center"  data-width="100%" >
                    <g:each in="${wipfollowlist}" status="i" var="tableInstance">
                            <td >
             <a data-toggle="navtab" data-id="wip-navtab-form" data-title="WIPDetailReport"  href="${request.getContextPath()}/wip/wipList?state=RUN&stage_id=${tableInstance.STAGE}">
                                        ${tableInstance.RUN}</a>
                            </td>
                 <td >
                            <a data-toggle="navtab" data-id="wip-navtab-form" data-title="WIPDetailReport"  href="${request.getContextPath()}/wip/wipList?state=RUN&stage_id=${tableInstance.STAGE}">
                                ${tableInstance.RUN_STATE}</a>
                        </td>
                     <td >
                          <a data-toggle="navtab" data-id="wip-navtab-form" data-title="WIPDetailReport"  href="${request.getContextPath()}/wip/wipList?state=WAIT&stage_id=${tableInstance.STAGE}">

                              ${tableInstance.WAIT}</a>
                      </td>
                   <td >
                       <a data-toggle="navtab" data-id="wip-navtab-form" data-title="WIPDetailReport"  href="${request.getContextPath()}/wip/wipList?state=WAIT&stage_id=${tableInstance.STAGE}">
                                ${tableInstance.WAIT_STATE}</a>
                        </td>
          <td >
                            <a data-toggle="navtab" data-id="wip-navtab-form" data-title="WIPDetailReport"  href="${request.getContextPath()}/wip/wipList?state=HOLD&stage_id=${tableInstance.STAGE}">
                                ${tableInstance.HOLD}</a>
                        </td>
                        <td >
                            <a data-toggle="navtab" data-id="wip-navtab-form" data-title="WIPDetailReport"  href="${request.getContextPath()}/wip/wipList?state=HOLD&stage_id=${tableInstance.STAGE}">
                                ${tableInstance.HOLD_STATE}</a>
                        </td>
                    </g:each>
                </tr>
                </tbody>
            </table>
        </g:if>
        <g:else>
            <g:render template="../template/emptyPanel" />
        </g:else>
    </div>
<div style="margin:20px auto 0; width:100%;">
   <div class="row" style="padding: 0 8px;">
        <div class="col-md-12" >
            <div class="panel panel-default" >
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-line-chart fa-fw"></i>
                        WIPStageState

                    </h3>
                </div>
                <div class="panel-body">
                <div style="mini-width:700px;height:400px;" id="main2"></div>
                </div>
            </div>
        </div>
</div>
    </div>


<script  src="${request.getContextPath()}/js/echarts/echarts.js"></script>
<script  src="${request.getContextPath()}/js/echarts/echarts-tool.js"></script>
<g:if test="${wipfollowlist.size()>0}">
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var contextPath = "${request.getContextPath()}";
        eChartsTool.init(contextPath);
        var data=[];
        <g:each in="${wipfollowlist}" status="i" var="tableInstance">
        data.push('${tableInstance.STAGE_ID}');
        </g:each>
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ''
            },
            tooltip: {},
            legend: {
                data:['RUN','WAIT','HOLD']

            },
            grid: {
                x:100,
                y2:100,
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                "axisLabel":{
                    "interval":0,
                    "rotate":15,
                    "textStyle":{
                        "fontSize":11,
                    },
                },

                data:data

            },
            yAxis: { axisLabel: {
                formatter: '{value} K'
            }},
            series: [
                <g:each in="${wipfollowlist2}" status="i" var="tableInstance">
                { name: '${tableInstance.STATE}',
                type: 'bar',
                %{--stack: '广告',--}%

                data: [${tableInstance.A10},${tableInstance.A20},${tableInstance.A30},${tableInstance.A40},
                    ${tableInstance.A50},${tableInstance.A60},${tableInstance.T10},${tableInstance.T20},${tableInstance.T30}]
                },
                </g:each>],
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            }
        };

        // 使用刚指定的配置项和数据显示图表。
        eChartsTool.setOption("roma", document.getElementById('main2'), option);
    </script>
</g:if>
